<template>
  <div class="panel" style="width: 100%;">
    <Title title="顾客分析"></Title>
    <div class="chart_container" style="width: 100%; height: calc(100% - 30px)">
      <div id="gkfx" class="echart"></div>
    </div>
  </div>
</template>

<script>
  import api from '@/utils/api.js'
  import Title from './Title'
  import {formatNumber} from '@/utils/util'
  export default {
    name: 'GKFX',
    components: {
      Title
    },
    data() {
      return {
        echarts: '',
        total: 1000,
        option: {
          color: ['#DC92FF', '#FFA08B', '#4C9AF8', '#35D7CD', '#FBD437'],
          title: [{
            text: '{name|' + '总数' + '}\n{val|' + formatNumber(1000) + '}',
            top: 'center',
            left: 'center',
            textStyle: {
              rich: {
                name: {
                  fontSize: 14,
                  fontWeight: 'normal',
                  color: '#666666',
                  padding: [10, 0]
                },
                val: {
                  fontSize: 32,
                  fontWeight: 'bold',
                  color: '#333333',
                }
              }
            }
          }],
          series: [{
            type: 'pie',
            radius: ['50%', '66%'],
            center: ['50%', '50%'],
            data: [
              {
                name: "普通顾客",
                value: "3720"
              },
              {
                name: "vip顾客",
                value: "2920"
              }
            ],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                borderWidth: 2
              }
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 120,
                lineStyle: {
                  color: '#e6e6e6'
                }
              }
            },
            label: {
              normal: {
                formatter: params => {
                  return (
                    '{icon|●}{name|' + params.name + '}{value|' +
                    formatNumber(params.value) + '}'
                  );
                },
                padding: [0 , -100, 25, -100],
                rich: {
                  icon: {
                    fontSize: 16
                  },
                  name: {
                    fontSize: 14,
                    padding: [0, 10, 0, 4],
                    color: '#666666'
                  },
                  value: {
                    fontSize: 18,
                    fontWeight: 'bold',
                    color: '#333333'
                  }
                }
              }
            },
          }]
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initEcharts()
        this.setInitOptions()
        this.getRemoteData()
      })
      this.screenAdapt()
    },
    methods: {
      initEcharts() {
        this.echarts = this.$echarts.init(document.getElementById('gkfx'), null, {devicePixelRatio: 2.5})
      },
      setInitOptions() {
        this.echarts.setOption(this.option)
      },
      screenAdapt() {
        window.addEventListener('resize', () => {
          this.echarts.resize()
        })
      },
      getRemoteData() {
        api.vipProportion().then(res => {
          this.total = res.data.toatl
          this.option.title[0].text =  '{name|' + '总数' + '}\n{val|' + formatNumber(this.total) + '}'
          this.option.series[0].data[0].value = res.data.user
          this.option.series[0].data[1].value = res.data.vip
          this.echarts.setOption(this.option)
        })
      }
    }
  }
</script>
